<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 点击按钮，更换图片 -->
     <button>点击</button>
     <img src="./img/filetype.png" />

     <script>
        // 点击按钮，更换图片
        document.querySelector("button").onclick = function(eve){
            //AJAX的请求
            //1 创建ajax对象
            let xhr = new XMLHttpRequest();
            //2 准备链接数据
            xhr.open("get","https://api.thecatapi.com/v1/images/search?size=full");
            //3 绑定事件回调函数,预先绑定策略 ,  ajax请求的状态改变
            xhr.onreadystatechange = function(eve){
                // console.log(eve);
                // console.log(xhr.readyState);
                // if(xhr.readyState == 2){alert("请求已经发出");}
                // if(xhr.readyState == 3){alert("服务器已经收到信息，加载动画");}
                if(xhr.readyState == 4 && xhr.status == 200){
                    //alert("请求数据已经返回到浏览器");
                    //3.1   包括所有的数据处理逻辑
                    // console.log(typeof xhr.response);//默认返回的是string，使用JSON转换
                    // console.log(JSON.parse(xhr.response));
                    let recData = JSON.parse(xhr.response);
                    document.querySelector("img").src =  recData[0].url;
                }
            }
            //4 发送请求数据
            xhr.send();
        };
     </script>
</body>
</html>